<template>
  <!--主页-->
  <div class="contain">
    <div class="layout-col m-1">
      <!--侧边栏-->
      <div class="slide-bar">
        <h5 class="slide-title">证书</h5>
        <ul class="slide-list">
          <li
              v-for="(item, index) in slideList"
              :key="item.id"
              @hover="handleHoverSlide(item.id, index)"
          >
            <span>{{ item.zs_name }}</span>
            <p>{{ item.zs_name2 }}</p>
            <i class="arrow-right"></i>
            <div v-if="item.courses" class="slide-hover-contain">
              <h5>推荐课程</h5>
              <ul class="courseList">
                <li
                    v-for="course in item.courses"
                    :key="course.sec_lab_id"
                    @click="handleCourseDetail(course.sec_lab_id)"
                >
                  <div class="img-wrap">
                    <img :src="course.forward_url" alt=""/>
                  </div>
                  <p>{{ course.course_name }}</p>
                  <span>{{ course.course_desc }}</span>
                </li>
              </ul>
              <h5>了解更多</h5>
              <div class="tagList">
                <div
                    class="tag"
                    v-for="tag in item.tags"
                    :key="tag.id"
                    @click="handleJumpUrl(tag.url)"
                >
                  <span>{{ tag.name }}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!--主页轮播-->
      <div class="banner" v-show="isShowBanner">
        <div class="swiper-container banner-swipe">
          <div class="swiper-wrapper">
            <div
                v-for="ads in adsList"
                :key="ads.id"
                class="swiper-slide"
            >
              <a class="banner-ads" :href="ads.h5_url">
                <img :alt="ads.gg_name" :src="ads.pic_url"/>
              </a>
            </div>
          </div>
          <!-- 导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>

    </div>
    <div class="m-contain">
      <h4 class="m-title">
        <span>免费直播</span>
        <p>互动有趣又有料</p>
        <a class="btn-more" @click="openMoreFreeLive">查看更多</a>
      </h4>
      <freeLiveOverview></freeLiveOverview>
    </div>
    <div class="m-contain">
      <h4 class="m-title">
        <span>热门产品</span>
        <p>一证在手工作不愁</p>
      </h4>
      <productOverview></productOverview>
    </div>
    <div class="m-contain">
      <h4 class="m-title">
        <span>财鑫商苑</span>
        <p>学习十八般武艺样样有</p>
      </h4>
      <div class="m-cols-split-3">
        <productSchoolView></productSchoolView>
        <productActivityView></productActivityView>
        <productWorkView></productWorkView>
      </div>
    </div>
    <div class="m-contain">
      <h4 class="m-title">
        <span>热门图书</span>
        <p>学习十八般武艺样样有</p>
      </h4>
      <productBookView></productBookView>
    </div>
    <div class="m-contain">
      <h4 class="m-title">
        <span>财经热点</span>
        <p>学习十八般武艺样样有</p>
      </h4>
      <div class="m-col layout-col">
        <div class="layout-col-big">
          <div class="tab-box">
            <nav
                class="tab tab1"
                @click="handleSwitchTab(1)"
                :class="{active:tabIndex === 1}"
            >财经C贴
            </nav>
            <nav
                class="tab tab2"
                :class="{active:tabIndex === 2}"
                @click="handleSwitchTab(2)"
            >热门回答
            </nav>
          </div>
          <CnewsIndex v-show="tabIndex === 1"></CnewsIndex>
          <hotQues v-show="tabIndex === 2"></hotQues>
        </div>
        <div class="layout-col-min">
          <everydayTopic></everydayTopic>
        </div>
      </div>
    </div>
    <div class="footer">
      <under-intro></under-intro>
      <copyright></copyright>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
import 'swiper/js/swiper.min.js';
import freeLiveOverview from './freeLiveOverview.vue';
import productOverview from './productOverview.vue';
import productSchoolView from './productSchoolView.vue';
import productActivityView from './productActivityView.vue';
import productWorkView from './productWorkView.vue';
import productBookView from './productBookView.vue';
import CnewsIndex from './CnewsIndex';
import hotQues from './hotQues';
import everydayTopic from './everydayTopic';
import underIntro from '../../components/underIntro';
import copyright from '../../components/copyright';

export default {
  name: 'homePage',
  components: {
    freeLiveOverview,
    productOverview,
    productSchoolView,
    productActivityView,
    productWorkView,
    productBookView,
    underIntro,
    CnewsIndex,
    hotQues,
    everydayTopic,
    copyright
  },
  data() {
    return {
      account: '',
      //侧边栏索引
      slideList: [],
      isShowBanner: true,
      adsList: [],
      banner: null,
      tabIndex: 1,
    };
  },
  watch: {
    /**/
  },
  mounted() {
    this.initSlideList();
    this.initAdsList();
  },
  methods: {
    // 初始化证书列表
    initSlideList() {
      this.$api.ajaxGetZsList().then(res => {
        this.slideList = res.obj;
        this.slideList.forEach((item, index) => {
          this.ajaxGetTjCourses(item.id).then(data => {
            let course = Object.assign(item, {
              courses: data.obj
            });
            this.$set(this.slideList, index, course);
          });
          this.ajaxGetZsBqs(item.id).then(data => {
            let tag = Object.assign(item, {
              tags: data.obj
            });
            this.$set(this.slideList, index, tag);
          });
        });
      });
    },
    // 初始化首屏广告
    initAdsList() {
      this.ajaxGetGgList()
          .then(res => {
            this.isShowBanner = true;
            this.adsList = res.obj;
            this.$nextTick(() => {
              this.initSwipe();
            });
          })
          .catch(() => {
//            this.isShowBanner = true;
//            this.adsList = [
//              {
//                pic_url:
//                    'https://www.wulihub.com.cn/gc/qG13bQ/images/%E9%A6%96%E9%A1%B5/u267.png'
//              },
//              {
//                pic_url:
//                    'https://www.wulihub.com.cn/gc/qG13bQ/images/%E9%A6%96%E9%A1%B5/u268.png'
//              }
//            ];
//            this.$nextTick(() => {
//              this.initSwipe();
//            });
            //this.isShowBanner = false;
          });
    },
    // 初始化轮播图
    initSwipe() {
      this.banner = new Swiper('.banner-swipe', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        //如果需要自动切换海报
        autoplay: {
          delay: 3000, //时间 毫秒
          disableOnInteraction: false //用户操作之后是否停止自动轮播
        }
      });
    },
    // 获取广告列表
    ajaxGetGgList() {
      let option = {
        pathName: 'getGgList',
        errorFunc: false,
        params: {
            gg_type:1,
            type: 1
        }
      };
      return this.$api.ajaxData(option);
    },
    // 获取证书标签信息
    ajaxGetZsBqs(id) {
      let option = {
        pathName: 'doGgZsBqs',
        params: {
          zs_id: id
        },
        errorFunc: false
      };
      return this.$api.ajaxData(option);
    },
    // 获取首屏广告列表
    ajaxGetTjCourses(id) {
      let option = {
        pathName: 'doGetTjCourses',
        params: {
          zs_id: id
        },
        errorFunc: false
      };
      return this.$api.ajaxData(option);
    },
    /*hover 左侧列表*/
    handleHoverSlide(id) {
      console.log(id);
      /*
      this.ajaxGetTjCourses(id).then(res => {
          console.log(res);
      })*/
    },
    // 查看课程详情
    handleCourseDetail(id) {
      this.$router.push({
        name: 'landingPage',
        query: {
          id: id
        }
      });
    },
    // 跳转地址
    handleJumpUrl(url) {
      window.open(url);
    },
    handleSwitchTab(index) {
      this.tabIndex = index;
    },
      // 更多免费直播
    openMoreFreeLive(){
        this.$router.replace({
            name: 'freeLive'
        });
    }
  }
};
</script>
<style scoped lang="scss">
  ul, li,p{
    margin: 0;
    padding: 0;
  }
.contain {
  position: relative;
  padding: 20px 0 0;

  .layout-col {
    display: flex;

    .slide-bar {
      position: relative;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      width: 250px;
      max-height: 400px;

      .slide-title {
        height: 40px;
        line-height: 40px;
        margin-bottom: 0;
        border-top-left-radius: 5px;
        font-size: 13px;
        font-weight: bold;
        color: #fff;
        background: #006ade;
        text-align: center;
      }

      .slide-list {
        display: flex;
        flex-direction: column;
        flex: 1;
        background: #fff;
        border: 1px solid #f2f2f2;
        border-bottom-left-radius: 5px;
        margin: 0;
        li {
          margin-top: -1px;
          display: flex;
          height: 60px;
          border-bottom: 1px solid #f2f2f2;
          align-items: center;
          cursor: pointer;

          span {
            display: block;
            flex: 1 0 60px;
            padding: 0 0 0 8px;
            font-size: 14px;
            color: rgb(102, 102, 102);
          }

          p {
            flex: 3 1 150px;
            padding: 0 0 0 8px;
            line-height: 1;
            font-size: 12px;
            color: rgb(204, 204, 204);
          }

          .arrow-right {
            margin-right: 10px;
            @include triangle(10px, rgb(228, 228, 228), right);
          }

          &:hover {
            background: rgba(0, 0, 0, 0.05);

            .slide-hover-contain {
              display: block;
              width: 500px;
              height: 400px;
            }
          }

          &:nth-child(6) {
            border-bottom: 0;
          }

          .slide-hover-contain {
            position: absolute;
            top: 0;
            left: 100%;
            width: 0;
            background: #fff;
            box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
            z-index: 11;
            overflow: hidden;
            transition-duration: 200ms;

            h5 {
              height: 50px;
              padding: 0 10px;
              line-height: 50px;
              font-size: 13px;
              font-weight: bold;
            }

            .courseList {
              display: flex;
              padding: 10px 5px;
              height: 132px;
              background: #f2f2f2;
              align-items: center;

              li {
                display: block;
                height: auto;
                padding: 0 5px;
                line-height: 20px;

                &:hover {
                  background: none;
                }

                .img-wrap {
                  display: block;
                  width: 112px;
                  height: 77px;
                  margin: 0 auto 10px;
                  border-radius: 10px;
                  background: #fff;

                  img {
                    border-radius: 10px;
                  }
                }

                p {
                  color: #333;
                  font-size: 12px;
                }

                span {
                  font-size: 12px;
                  color: #999;
                }
              }
            }

            .tagList {
              display: flex;
              padding: 10px 0;
              flex-wrap: wrap;

              .tag {
                width: 25%;
                margin-bottom: 10px;
                text-align: center;

                span {
                  display: inline-block;
                  height: 24px;
                  width: 80px;
                  line-height: 24px;
                  padding: 0 10px;
                  border-radius: 12px;
                  border: 1px solid #999;
                  font-size: 13px;
                  text-align: center;
                  color: #999;

                  &:hover {
                    border-color: #006ade;
                    color: #006ade;
                  }
                }
              }
            }
          }
        }
      }
    }

    .banner {
      flex: 1 1;
      width: 950px;
      height: 400px;

      .swiper-container {
        height: 100%;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        overflow: hidden;
        .swiper-wrapper {
          width: 950px;
          .swiper-slide {
            height: 100%;
            .banner-ads {
              width: 100%;
              height: 100%;

              img {
                width: 100%;
                height: 100%;
                border: none;
              }
            }
          }
        }
      }
    }

    .layout-col-big {
      flex: 1 1;

      .tab-box {
        display: flex;
        margin-bottom: 20px;

        .tab {
          width: 120px;
          height: 40px;
          margin-right: 10px;
          line-height: 38px;
          border-radius: 20px;
          font-family: '微软雅黑';
          font-weight: 400;
          font-style: normal;
          color: #999999;
          text-align: center;
          cursor: pointer;

          &.active {
            border: 1px solid #0079FE;
            font-weight: 700;
            color: #0079FE;
            background: #fff;
          }
        }
      }
    }

    .layout-col-min {
      flex-shrink: 0;
      width: 385px;
      margin-left: 15px;
    }
  }

  .m-contain {
    .m-title {
      line-height: 60px;
      height: 60px;

      span {
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }

      p {
        display: inline-block;
        padding: 0 8px;
        font-size: 13px;
        color: #666;
      }
      .btn-more {
        float: right;
        line-height: 60px;
        color: #666;
      }
    }
  }

  .m-cols-split-3 {
    display: flex;
  }
}

.swiper-button-next,
.swiper-button-prev {
  width: calc(var(--swiper-navigation-size) / 44 * 40);
  height: calc(var(--swiper-navigation-size) / 44 * 40);
}

.swiper-button-prev:after {
  content: '';
  width: 100%;
  height: 100%;
  background: url('../../assets/image/icon/u281.png') no-repeat;
  background-size: contain;
}

.swiper-button-next:after {
  content: '';
  width: 100%;
  height: 100%;
  background: url('../../assets/image/icon/u279.png') no-repeat;
  background-size: contain;
}

ul, li, p {
  margin-bottom: 0;
}
</style>
